[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { SidebarProvider } from "@/components/sidebar-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Sambo Admin Dashboard", description: "Admin dashboard for Sambo wallet management", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 240 10% 3.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; --primary: 240 5.9% 10%; --primary-foreground: 0 0% 98%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --accent: 240 4.8% 95.9%; --accent-foreground: 240 5.9% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 240 5.9% 10%; --radius: 0.5rem; /* Sidebar specific variables */ --sidebar: 0 0% 100%; --sidebar-foreground: 240 10% 3.9%; --sidebar-muted: 240 4.8% 95.9%; --sidebar-muted-foreground: 240 3.8% 46.1%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 240 5.9% 90%; } .dark { --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 10% 3.9%; --card-foreground: 0 0% 98%; --popover: 240 10% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 240 5.9% 10%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --accent: 240 3.7% 15.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 240 4.9% 83.9%; /* Sidebar specific variables */ --sidebar: 240 10% 3.9%; --sidebar-foreground: 0 0% 98%; --sidebar-muted: 240 3.7% 15.9%; --sidebar-muted-foreground: 240 5% 64.9%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 0 0% 98%; --sidebar-border: 240 3.7% 15.9%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Sidebar styles */ .bg-sidebar { background-color: hsl(var(--sidebar)); } .text-sidebar-foreground { color: hsl(var(--sidebar-foreground)); } .bg-sidebar-accent { background-color: hsl(var(--sidebar-accent)); } .text-sidebar-accent-foreground { color: hsl(var(--sidebar-accent-foreground)); } /* Add responsive utility classes */ @layer utilities { .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { redirect } from "next/navigation" export default function Home() { redirect("/dashboard") } [V0_FILE]typescriptreact:file="app/(dashboard)/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import { Sidebar } from "@/components/sidebar" import { Header } from "@/components/header" import { SidebarProvider } from "@/components/sidebar-provider" export default function DashboardLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="app/(dashboard)/dashboard/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { UsersIcon, WalletIcon, UserPlusIcon, UserXIcon } from "lucide-react" import { DashboardChart } from "@/components/dashboard-chart" import { RecentTransactions } from "@/components/recent-transactions" export default function DashboardPage() { return (

Dashboard

Overview of your platform statistics and performance.

Daily Weekly Monthly

New Users Today

+12% from yesterday

Total Users

1,284

+2.5% from last week

Transactions Today

R 12,543

+18% from yesterday

Non-Users

342

-4% from yesterday

New Users This Week

156

+8% from last week

Total Users

1,284

+2.5% from last week

Transactions This Week

R 87,651

+12% from last week

Non-Users

342

-4% from last week

New Users This Month

642

+15% from last month

Total Users

1,284

+2.5% from last month

Transactions This Month

R 324,845

+22% from last month

Non-Users

342

-4% from last month

Transaction Overview Transaction volume over time Recent Transactions Latest transactions on the platform

) } [V0_FILE]typescriptreact:file="app/(dashboard)/users/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Search, UserCog } from "lucide-react" import Link from "next/link" import { CreateUserDialog } from "@/components/create-user-dialog" // Update the users page to improve responsiveness export default function UsersPage() { return (

Users

Manage user accounts and wallets

Name Email ID Type Phone Status Actions {users.map((user) => ( {user.name} {user.surname} {user.email} {user.idType} {user.phone}

{user.status}

))}

) } const users = [ { id: "1", name: "Thabo", surname: "Mbeki", email: "thabo.mbeki@example.com", idType: "ID", phone: "+27 71 234 5678", status: "Active", }, { id: "2", name: "Nomzamo", surname: "Mbatha", email: "nomzamo.mbatha@example.com", idType: "Passport", phone: "+27 82 345 6789", status: "Active", }, { id: "3", name: "Siya", surname: "Kolisi", email: "siya.kolisi@example.com", idType: "ID", phone: "+27 63 456 7890", status: "Active", }, { id: "4", name: "Bonang", surname: "Matheba", email: "bonang.matheba@example.com", idType: "ID", phone: "+27 74 567 8901", status: "Pending", }, { id: "5", name: "Trevor", surname: "Noah", email: "trevor.noah@example.com", idType: "Passport", phone: "+27 85 678 9012", status: "Active", }, { id: "6", name: "Patrice", surname: "Motsepe", email: "patrice.motsepe@example.com", idType: "ID", phone: "+27 76 789 0123", status: "Active", }, { id: "7", name: "Caster", surname: "Semenya", email: "caster.semenya@example.com", idType: "ID", phone: "+27 87 890 1234", status: "Pending", }, { id: "8", name: "Elon", surname: "Musk", email: "elon.musk@example.com", idType: "Asylum Seeker", phone: "+27 78 901 2345", status: "Active", }, ] [V0_FILE]typescriptreact:file="app/(dashboard)/users/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/(dashboard)/users/[id]/page.tsx" isMerged="true" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { ArrowLeft, UserCog, Wallet, History, Shield, AlertTriangle } from "lucide-react" import Link from "next/link" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { UserTransactions } from "@/components/user-transactions" export default function UserProfilePage({ params }: { params: { id: string } }) { // In a real app, you would fetch the user data based on the ID const user = users.find((u) => u.id === params.id) || users[0] return (

{user.name} {user.surname}

User profile and account management

Profile Wallet Transactions Security Profile Information View and update user profile details

First Name

Surname

Phone Number

ID Type

Account Status

Wallet Information Manage user wallet and balance

Current Balance

R {user.balance.toFixed(2)}

Last updated: Today at 12:34 PM

Wallet Status

{user.walletStatus}

Created: {user.walletCreated}

Top Up Wallet

Transaction History View all transactions for this user Security Settings Manage user security and access

Reset Password

Two-Factor Authentication

2FA Status

{user.twoFactorEnabled ? "Enabled" : "Disabled"}

) } const users = [ { id: "1", name: "Thabo", surname: "Mbeki", email: "thabo.mbeki@example.com", idType: "ID", phone: "+27 71 234 5678", status: "Active", balance: 1250.75, walletStatus: "Active", walletCreated: "2023-05-12", twoFactorEnabled: false, }, { id: "2", name: "Nomzamo", surname: "Mbatha", email: "nomzamo.mbatha@example.com", idType: "Passport", phone: "+27 82 345 6789", status: "Active", balance: 3450.5, walletStatus: "Active", walletCreated: "2023-06-18", twoFactorEnabled: true, }, { id: "3", name: "Siya", surname: "Kolisi", email: "siya.kolisi@example.com", idType: "ID", phone: "+27 63 456 7890", status: "Active", balance: 5678.25, walletStatus: "Active", walletCreated: "2023-04-30", twoFactorEnabled: false, }, { id: "4", name: "Bonang", surname: "Matheba", email: "bonang.matheba@example.com", idType: "ID", phone: "+27 74 567 8901", status: "Pending", balance: 0.0, walletStatus: "Pending", walletCreated: "2023-08-05", twoFactorEnabled: false, }, { id: "5", name: "Trevor", surname: "Noah", email: "trevor.noah@example.com", idType: "Passport", phone: "+27 85 678 9012", status: "Active", balance: 12500.0, walletStatus: "Active", walletCreated: "2023-02-14", twoFactorEnabled: true, }, ] [V0_FILE]typescriptreact:file="components/sidebar-provider.tsx" isEdit="true" isMerged="true" "use client" import { createContext, useContext, useState, type ReactNode } from "react" type SidebarContextType = { isOpen: boolean toggle: () => void } const SidebarContext = createContext(undefined) export function SidebarProvider({ children }: { children: ReactNode }) { const [isOpen, setIsOpen] = useState(false) const toggle = () => { setIsOpen(!isOpen) } return {children} } export function useSidebar() { const context = useContext(SidebarContext) if (context === undefined) { throw new Error("useSidebar must be used within a SidebarProvider") } return context } [V0_FILE]typescriptreact:file="components/header.tsx" isEdit="true" isMerged="true" "use client" import { useSidebar } from "./sidebar-provider" import { Bell, Search, User, Menu } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" export function Header() { const { toggle } = useSidebar() return (

My Account Profile Settings Logout

) } [V0_FILE]typescriptreact:file="components/dashboard-chart.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts" export function DashboardChart() { const [mounted, setMounted] = useState(false) useEffect(() => { setMounted(true) }, []) if (!mounted) { return (

Loading chart...

) } return (

`R${value}`} /> [`R${value}`, "Amount"]} contentStyle={{ backgroundColor: "hsl(var(--background))", borderColor: "hsl(var(--border))", borderRadius: "var(--radius)", }} />

) } const data = [ { name: "Jan", total: 45000, }, { name: "Feb", total: 63500, }, { name: "Mar", total: 58200, }, { name: "Apr", total: 72800, }, { name: "May", total: 85600, }, { name: "Jun", total: 92400, }, { name: "Jul", total: 105200, }, { name: "Aug", total: 91000, }, { name: "Sep", total: 97500, }, { name: "Oct", total: 110800, }, { name: "Nov", total: 142500, }, { name: "Dec", total: 168000, }, ] [V0_FILE]typescriptreact:file="components/recent-transactions.tsx" isMerged="true" import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { ArrowUpRight, ArrowDownLeft } from "lucide-react" export function RecentTransactions() { return (

{transactions.map((transaction) => (

{transaction.type === "credit" ? ( ) : ( )} {transaction.name[0]}

{transaction.name}

{transaction.date}

{transaction.type === "credit" ? "+" : "-"}R {transaction.amount.toFixed(2)}

))}

) } const transactions = [ { id: "1", name: "Thabo Mbeki", amount: 250.0, date: "2023-11-14", type: "credit", }, { id: "2", name: "Nomzamo Mbatha", amount: 1000.0, date: "2023-11-13", type: "debit", }, { id: "3", name: "Siya Kolisi", amount: 500.0, date: "2023-11-12", type: "credit", }, { id: "4", name: "Trevor Noah", amount: 750.0, date: "2023-11-11", type: "debit", }, { id: "5", name: "Patrice Motsepe", amount: 2500.0, date: "2023-11-10", type: "credit", }, ] [V0_FILE]typescriptreact:file="components/user-transactions.tsx" isMerged="true" import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { ArrowUpRight, ArrowDownLeft } from "lucide-react" import { Card } from "@/components/ui/card" export function UserTransactions({ userId }: { userId: string }) { // Filter transactions for this user const userTransactions = transactions.filter((t) => t.userId === userId) if (userTransactions.length === 0) { return

No transactions found for this user.

} return (

{userTransactions.map((transaction) => (

{transaction.type === "credit" ? ( ) : ( )} {transaction.description[0]}

{transaction.description}

{transaction.date} • {transaction.time}

{transaction.type === "credit" ? "+" : "-"}R {transaction.amount.toFixed(2)}

Reference: {transaction.reference}

))}

) } const transactions = [ { id: "t1", userId: "1", description: "Salary Deposit", amount: 5000.0, date: "2023-11-14", time: "09:45 AM", type: "credit", reference: "SAL-NOV-2023", }, { id: "t2", userId: "1", description: "Grocery Shopping", amount: 750.0, date: "2023-11-12", time: "02:30 PM", type: "debit", reference: "POS-CHECKERS-1234", }, { id: "t3", userId: "1", description: "Electricity Bill", amount: 450.0, date: "2023-11-10", time: "10:15 AM", type: "debit", reference: "UTIL-ESKOM-5678", }, { id: "t4", userId: "2", description: "Business Payment", amount: 12500.0, date: "2023-11-15", time: "11:20 AM", type: "credit", reference: "BUS-PAYMENT-9012", }, { id: "t5", userId: "2", description: "Car Insurance", amount: 1200.0, date: "2023-11-05", time: "08:45 AM", type: "debit", reference: "INS-OUTSURANCE-3456", }, { id: "t6", userId: "3", description: "Sponsorship Payment", amount: 25000.0, date: "2023-11-08", time: "03:15 PM", type: "credit", reference: "SPON-NIKE-7890", }, ] [V0_FILE]typescriptreact:file="components/create-user-dialog.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { UserPlus } from "lucide-react" export function CreateUserDialog() { const [open, setOpen] = useState(false) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // In a real app, you would submit the form data to your API setOpen(false) } return ( ) } [V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="components/sidebar.tsx" isEdit="true" isQuickEdit="true" "use client" import Link from "next/link" import { usePathname } from "next/navigation" import { useSidebar } from "./sidebar-provider" import { cn } from "@/lib/utils" import { LayoutDashboard, Users, Wallet, BarChart3, Settings, HelpCircle, LogOut, Menu } from "lucide-react" import { Button } from "@/components/ui/button" export function Sidebar() { const pathname = usePathname() const { isOpen, toggle } = useSidebar() return ( <>

Sambo Admin

{footerItems.map((item, index) => (

{item.subItems ? (

{item.name}

{item.subItems.map((subItem, subIndex) => ( {subItem.name} {subItem.description && ( {subItem.description} )} ))}

) : ( {item.name} {item.description && ( {item.description} )} )}

))}

) } const navItems = [ { name: "Dashboard", href: "/dashboard", icon: LayoutDashboard }, { name: "Users", href: "/users", icon: Users, badge: "8" }, { name: "Transactions", href: "/transactions", icon: Wallet }, { name: "Analytics", href: "/analytics", icon: BarChart3 }, ] const footerItems = [ { name: "Settings", href: "/settings", icon: Settings, subItems: [ { name: "Profile", href: "/settings/profile", description: "Update your details" }, { name: "Security", href: "/settings/security", description: "Manage your password" }, { name: "Communication", href: "/settings/communication", description: "Email and phone" }, { name: "Permissions", href: "/settings/permissions", description: "Access control" }, ], }, { name: "Help", href: "/help", icon: HelpCircle, description: "Get support" }, { name: "Logout", href: "/logout", icon: LogOut, description: "Exit the app" }, ] [V0_FILE]typescriptreact:file="app/(dashboard)/settings/profile/page.tsx" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Button } from "@/components/ui/button" export default function ProfileSettingsPage() { return (

Profile Settings

Personal Information Update your personal details here.

) } [V0_FILE]typescriptreact:file="app/(dashboard)/settings/security/page.tsx" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Button } from "@/components/ui/button" export default function SecuritySettingsPage() { return (

Security Settings

Change Password Ensure your account is using a long, random password to stay secure.

) } [V0_FILE]typescriptreact:file="app/(dashboard)/settings/communication/page.tsx" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Button } from "@/components/ui/button" export default function CommunicationSettingsPage() { return (

Communication Settings

Contact Information Manage your email and phone number for communications.

) } [V0_FILE]typescriptreact:file="app/(dashboard)/settings/permissions/page.tsx" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Checkbox } from "@/components/ui/checkbox" import { Label } from "@/components/ui/label" import { Button } from "@/components/ui/button" export default function PermissionsSettingsPage() { return (

Permissions Settings

Access Control Manage user roles and permissions.

) }

About

Tags

Share

About

Tags

Share

More Templates Like This